<template>
<div id="app">
    <div class="container">
        <div class="close"><span class="iconfont iconicon-test"></span></div>
        <div class="logo"><span class="iconfont iconnew"></span></div>
        <div class="inputs">
            <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->
            <!-- 
                error: 字体红色样式
                label: 设置输入框左边的标题
                required：表示必填项

                ref: 作用一，获取标签
                      作用二，获取组件
             -->
            <van-form ref="form">
              <van-field v-model="user.username" 
              placeholder="请输入用户名" 
              :rules="[{required: true, message: '用户名不能为空'}]" />
              <van-field v-model="user.password"
               type="password" placeholder="请输入密码" 
               :rules="[{required: true, message: '密码不能为空'}]" />
            </van-form>
        </div>
        <p class="tips">
            没有账号？
            <a href="#/register" class="">去注册</a>
        </p>
        <!-- <div class="button">登录按钮</div> -->
        <van-button type="danger" icon="star-o" round block @click="loginFn">登录</van-button>
    </div>
</div>
</template>

<script>
import { login } from "@/api/user.js"
export default {
    data(){
        return {
            // 如果接口需要传递多个参数的时候，我们一般把他们放到同一个对象中
            // 为什么呢？答：原因一：调用接口的时候方便传参数
            user: {
                username: "",
                password: ""
            }
        }
    },
    methods: {
        // 登录
        loginFn(){
            // vant组件库内置 校验，校验的结果可以通过validate方法获取到，
            // 当验证通过则触发then函数，不通过则触发catch函数
            // validate方法通过form表单调用的
            this.$refs.form.validate().then(()=>{
                console.log("验证成功");
                login( this.user).then(res=>{
                    console.log(res);
                    if(res.data.message === "登录成功"){
                        // 保存token和用户ID 
                        localStorage.setItem("75-token", res.data.data.token)
                        localStorage.setItem("75-userId", res.data.data.user.id)
                        // 跳转到首页或者其他页面
                        let query = this.$route.query
                        let url = query.redirectUrl&&query.redirectUrl.split("#")[1]
                        // let url = query.redirectUrl&&query.redirectUrl.split("#")[1]||""
                        // if(query.redirectUrl){
                        //     url = query.redirectUrl.split("#")[1]
                        // }else{
                        //     url = ""
                        // }
                        if(url){
                            this.$router.push(url)
                        }else{
                            this.$router.push({
                                path: "/index"    // 将来我们声明首页路由路径的时候，就取名为/index
                            })
                        }
                    }else {
                        this.$toast.fail(res.data.message)
                    }
                })
            }).catch(()=>{
                console.log("验证失败");
            })
        }
    }
}
</script>

<style lang="less" scoped>
// vant组件库中的组件名即为当前组件的类名
// 样式穿透，表示使用了样式穿透，我们就可以直接设置组件内部的标签样式
// /deep/ 样式穿透是less预处理器提供的语法
// 注意：样式穿透针对局部样式，也就是style标签上必须写上scoped属性样式穿透才生效。
/deep/.van-field{
    border-bottom: 1px solid green;
    margin-bottom: 10px;
    input{
        color: green;
    }
}
.container {
    padding: 20px;
}
.close {
    span {
        font-size: (27 / 360) * 100vw;
    }
}
.logo {
    display: flex;
    justify-content: center;

    span {
        display: block;
        font-size: (126 / 360) * 100vw;
        color: #d81e06;
    }
}
.inputs {
    input {
        margin-bottom: 20px;
    }
}
.tips {
    text-align: right;
    margin-bottom: 20px;
    a {
        color: #3385ff;
    }
}
</style>